<template>
  <div class="detail-cluster-wrapper">
    <div class="left">
      <div class="img-wrapper" v-for="(item, index) of clusterInfo.userData" :key="index">
        <img :src="item.avatar" alt="">
      </div>
    </div>
    <div class="right">
      <div class="right-left">
        <p class="desc">
          还差
          <span>{{clusterInfo.remain}}</span> 人拼成
        </p>
        <p class="time">{{ updateTime }}</p>
      </div>
      <div class="right-right" @click="shareBill">去拼单</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    clusterInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      updateTime: ''
    }
  },
  methods: {
    calcuRemainTime(clusterInfo) {
      let end  = clusterInfo.active_end_time
      let start = new Date().getTime() / 1000
      let duration = end - start
      if (duration <= 0) return '已结束'
      let hour = Math.floor(duration / 3600)
      let minute = Math.floor(duration % 3600 / 60)
      let second = Math.floor(duration % 3600 % 60)
      hour = hour >= 10 ? hour : '0' + hour
      minute = minute >= 10 ? minute : '0' + minute
      second = second >= 10 ? second : '0' + second
      this.updateTime = '剩余：' + hour + ':' + minute + ':' + second
    },
    shareBill() {
      this.$emit('shareBill', this.clusterInfo)
    }
  },
  destroyed() {
    this.timer && clearInterval(this.timer)
  },
  created() {
    this.timer = setInterval(() => {
      this.calcuRemainTime(this.clusterInfo)
    }, 1000)
  }
};
</script>
<style lang="less" scoped>
.detail-cluster-wrapper {
  width: 100%;
  height: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    .img-wrapper {
      width: 1.08rem;
      height: 1.08rem;
      border-radius: 50%;
      overflow: hidden;
      &:nth-child(n + 2) {
          margin-left: -0.3rem;
        }
      img {
        width: 100%;
        vertical-align: bottom;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    .right-left {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-right: 0.4rem;
      .desc {
        font-size: 0.48rem;
        line-height: 0.6rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(68, 68, 68, 1);
        span {
          color: red;
        }
      }
      .time {
        font-size: 0.48rem;
        line-height: 0.6rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
      }
    }
    .right-right {
      width: 2.44rem;
      height: 1.04rem;
      background: rgba(225, 1, 1, 0.08);
      border-radius: 0rem;
      font-size: 0.52rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(233, 25, 25, 1);
      line-height: 1.04rem;
      text-align: center;
    }
  }
}
</style>